<template>
  <div class="post">
    <el-row :gutter="40">
      <!-- 左侧部分 -->
      <el-col :span="7">
        <!-- 左侧导航列表 -->
        <!-- 城市列表栏 -->
        <el-menu class="menus" @mouseleave.native="isShow = false">
          <el-menu-item
            class="menu-item"
            v-for="(item, index) in cityList"
            :key="index"
            active-text-color="#ffa500"
            @mouseover.native="handlerActive(index)"
          >
            <span>{{ item.type }}</span>
            <i class="el-icon-arrow-right"></i>
          </el-menu-item>
          <el-menu index class="submenu" v-show="isShow">
            <el-menu-item
              v-for="(value, index) in cityData"
              :key="index"
              @click="$router.replace(`/post?city=${value.city}`)"
            >
              <el-row>
                <el-col :span="2">{{ index + 1 }}</el-col>
                <el-col :span="4">{{ value.city }}</el-col>
                <el-col :span="18">{{ value.desc }}</el-col>
              </el-row>
            </el-menu-item>
          </el-menu>
        </el-menu>
        <!-- 推荐城市 -->
        <div class="aside-recommend">
          <h4>推荐城市</h4>
          <!-- 服务端无图片，写死 -->
          <a href="/post?city=广州">
            <img src="/image/pic_sea.jpeg" alt="" />
          </a>
        </div>
      </el-col>
      <!-- 右侧文章列表部分 -->
      <el-col :span="17">
        <!-- 搜索框部分 -->
        <el-row
          justify="space-between"
          align="middle"
          type="flex"
          class="searchCity"
        >
          <input
            type="text"
            placeholder="请输入想去的地方，比如：'广州'"
            v-model="value"
          />
          <i class="el-icon-search" @click="searchCity()"></i>
        </el-row>
        <!-- 搜索推荐 -->
        <el-row type="flex" justify="flex-start" class="recommendCity">
          <span>推荐：</span>
          <span
            v-for="(item, index) in hotCity"
            :key="index"
            @click="searchCity(item)"
            >{{ item }}</span
          >
        </el-row>
        <!-- 推荐攻略标题 -->
        <el-row class="recommendStrategy" justify="space-between" type="flex">
          <el-col><h3>推荐攻略</h3></el-col>
          <el-button
            type="primary"
            size="medium"
            @click="$router.push('/post/review')"
          >
            <i class="el-icon-edit"></i>写游记
          </el-button>
        </el-row>
        <!-- 攻略文章列表 -->
        <StrategyItem
          v-for="(item, index) in dataList"
          :key="index"
          :post="item"
        />
        <div v-if="isDisplay" class="tips">没有查询到你想的数据</div>
        <!-- 文章分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="3"
          layout="total, sizes, prev, pager, next, jumper"
          :total="StrategyList.length"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import StrategyItem from "@/components/post/strategyItem";
export default {
  components: {
    StrategyItem,
  },
  data() {
    return {
      value: "",
      cityList: [],
      cityData: [],
      StrategyList: [],
      dataList: [],
      isShow: false,
      isDisplay: false,
      pageIndex: 1,
      pageSize: 3,
      hotCity: ["北京", "上海", "广州"],
    };
  },
  methods: {
    // 请求获取数据
    getData() {
      this.$axios({
        url: "/posts",
        params: this.$route.query,
      }).then((res) => {
        // console.log(res);
        this.StrategyList = res.data.data;
        // console.log(this.StrategyList);
        this.getPageData();
        if (this.StrategyList.length > 0) {
          this.isDisplay = false;
          this.pageIndex = 1;
        } else {
          this.$message.info("没有查询到数据");
          this.isDisplay = true;
        }
      });
    },
    // 导航栏选中显示右侧数据
    handlerActive(index) {
      this.cityData = this.cityList[index].children;
      this.isShow = true;
    },
    // 每页显示多少条推荐攻略数据
    handleSizeChange(v) {
      this.pageSize = v;
      this.getPageData();
    },
    // 当前推荐攻略页码
    handleCurrentChange(v) {
      this.pageIndex = v;
      this.getPageData();
    },
    // 当前页显示的推荐攻略数据
    getPageData() {
      const start = (this.pageIndex - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.dataList = this.StrategyList.slice(start, end);
    },
    // 搜索城市数据
    searchCity(val) {
      if (val) {
        // console.log(val);
        this.value = val;
      }
      if (this.value) {
        this.$router.replace(`/post?city=${this.value}`);
      } else {
        this.$router.push("/post");
      }
      //   let arr = this.StrategyList.filter((item) => {
      //     return item.cityName.indexOf(this.value) != -1;
      //   });

      // console.log(arr);
      // console.log(this.StrategyList);
      // this.StrategyList = arr;
      // this.getPageData();
      // console.log(this.StrategyList);
    },
  },
  watch: {
    // 监听路由变化
    $route() {
      this.getData();
    },
  },
  mounted() {
    this.$axios({
      url: "/posts/cities",
    }).then((res) => {
      console.log(res);
      this.cityList = res.data.data;
      // console.log(this.cityList);
    });
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.post {
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  .menus {
    position: relative;
    width: 100%;
    border-top: 1px solid #ddd;
    margin-right: 50px;
    .menu-item {
      position: relative;
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      border: 1px solid #ccc;
      border-top: none;
      z-index: 2;
      color: black;
      i {
        line-height: 40px;
        font-size: 25px;
        color: #ddd;
      }
      &:hover {
        color: #ffa500;
        border-right: none;
        i {
          color: #ffa500;
        }
      }
    }
    .submenu {
      position: absolute;
      width: 350px;
      top: -1px;
      left: 262px;
      z-index: 1;
      border: 1px solid #ddd;
      /deep/ .el-row {
        .el-col {
          font-size: 15px;
          color: #ffa500;
          &:last-child {
            color: black;
          }
          &:first-child {
            font-size: 20px;
            font-style: italic;
          }
        }
      }
    }
  }
  .aside-recommend {
    margin-top: 10px;
    h4 {
      font-size: 20px;
      line-height: 40px;
      font-weight: 400;
      margin-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }
    img {
      width: 100%;
    }
  }
  .searchCity {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 3px solid orange;
    input {
      flex: 1;
      outline: none;
      border: none;
      background: none;
      padding: 0 20px;
      line-height: 40px;
    }
    i {
      font-size: 24px;
      margin-right: 5px;
      font-weight: 700;
      cursor: pointer;
      color: orange;
    }
  }
  .recommendCity {
    margin-top: 10px;
    font-size: 12px;
    span {
      margin-right: 10px;
      cursor: pointer;
      &:hover {
        color: #ffa500;
      }
    }
  }
  .recommendStrategy {
    padding: 10px 0;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
    h3 {
      color: #ffa500;
      font-weight: 400;
    }
    i {
      margin-right: 10px;
    }
  }
  .tips {
    width: 100%;
    text-align: center;
  }
}
</style>